<template>
    <div class="view" v-if="initShow">
        <android-nav-bar title="相互喜欢" v-on:back="back"></android-nav-bar>
        <div class="none-watcher" v-if="watchersTotal==0">
            <div class="none-img" v-if="!isToEncounter">
                <div class="self-img">
                    <span class="iconfont icon-ren"></span>
                </div>
                <div class="title">上传{{!user.avatarId?'头像':'照片'}}</div>
                <p class="tip-none">还没有相互喜欢的配对，先从上传一张完美的{{!user.avatarId?'头像':'照片'}}开始吧!</p>
                <cube-upload accept="image/*" ref="upload" v-model="files" @files-added="addFiles" @file-success="addFilesSucc" :action="uploadOption">
                    <cube-upload-btn :multiple="false" v-if="!user.avatarId">
                        <div class="upload-photo">本地相册</div>
                    </cube-upload-btn>
                    <cube-upload-btn :multiple="true" v-if="user.photo.length==0 && user.avatarId">
                        <div class="upload-photo">本地相册</div>
                    </cube-upload-btn>
                </cube-upload>
            </div>
            <div class="has-img" v-else>
                <span class="iconfont icon-empty"></span>
                <p>还没有相互喜欢的配对，<br> 快去邂逅看看吧~</p>
                <div class="to-encounter" @click="toPage('main')">去邂逅</div>
            </div>
        </div>
        <div class="has-watcher" v-if="watchersTotal>0 && user.userRank<=1">
            <div class="nav-box">
                <svg width="100vw" height="130" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path :d="`M0 100 c${screenWidth/3} -${60 * screenWidth/320}, ${screenWidth/3*2} -${60 * screenWidth/320}, ${screenWidth} 0 V 130 H 0 Z`" stroke="#fff" fill="#fff"></path>
                </svg>
                <div class="arc-box" :style="`height: 80px;bottom: 0px;`">
                    <div class="head-img-container">
                        <svg class="svg-icon huangguan" aria-hidden="true">
                            <use xlink:href="#icon-huangguan3-copy"></use>
                        </svg>
                        <div class="head-img-box">
                            <head-img class="self-img" :styleObject="{width:'25vw',height:'25vw'}" showObject="self" :self="self" noneImgTip="上传头像"></head-img>
                            <p class="state-tip" v-if="user.avatarId && user.avatar && user.avatar.fileStatus.status==0">审核中</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="un-senior-member">
                <div class="watchers-tip">与<b>{{watchersTotal}}</b>位会员相互喜欢</div>
                <div class="member-open-tip">开通高级会员查看相互喜欢的人</div>
                <div class="member-open" @click="toPage('mineMemberRank')">立即开通</div>
                <div class="watchers-box flex">
                    <div class="watcher" v-for="item in watchersArray.slice(0,3)">
                        <div class="avatar">
                            <div class="has-avatar" v-if="item.avatar&&item.avatar.file_status.status">
                                <img :src="item.avatar.file_path+'?imageView2/0/h/80'">
                                <span class="iconfont icon-suo"></span>
                            </div>
                            <div class="none-avatar" v-else>
                                <span class="iconfont" :class="item.gender==2?'icon-touxiang-nv':'icon-touxiang1'"></span>
                            </div>
                            <p class="creat-time">{{new Date(item.create_time*1000).getMonth()+1<10?'0'+(new Date(item.create_time*1000).getMonth()+1):new
                                Date(item.create_time*1000).getMonth()+1}}月{{new Date(item.create_time*1000).getDate()<10?'0'+new Date(item.create_time*1000).getDate():new
                                Date(item.create_time*1000).getDate()}}日</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <cube-scroll class="scroll is-senior-member" ref="scroll" :scroll-events="['scroll']"
                     :data="watchers"
                     :options="options"
                     @pulling-down="onPullingDown"
                     @pulling-up="onPullingUp"
                     v-if="watchersTotal>0 && user.userRank>1">
            <div class="date-sort" v-for="(item, index) in watchers">
                <div class="time">
                    <span class="circle"></span>
                    {{item.time.slice(5)}}
                </div>
                <div class="content flex">
                    <div class="item" v-for="item in item.child" @click="toPage('friendInfo',{friendId: item.mylover.user_id})">
                        <div class="has-avatar" v-if="item.mylover.avatar&&item.mylover.avatar.file_status.status">
                            <img :src="item.mylover.avatar.file_path+'?imageView2/0/h/80'" class="avatar"
                                 :style="`background:#F3F3F3 url(${publicPath}/img/base/${item.mylover.gender==2?'avatar-female':'avatar-male'}.png) no-repeat;backgroundSize:76% 76%;backgroundPosition:50% 50%;`">
                        </div>
                        <div class="none-avatar" v-else>
                            <span class="iconfont" :class="item.mylover.gender==2?'icon-touxiang-nv':'icon-touxiang1'"></span>
                        </div>
                        <div class="nickname ellipsis">{{item.mylover.nickName}}</div>
                        <div class="age">{{item.mylover.age}}{{item.mylover.age=='未知'?'年龄':'岁'}}</div>
                        <div class="handle" @click.stop="needMatch(item.mylover.user_id)"><span>求牵</span></div>
                    </div>
                </div>
            </div>
        </cube-scroll>

    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import CommonUnit from "@/unit/CommonUnit";
    import {updateUser} from "@/store/dispatches";
    import UserEntity from "@/entity/UserEntity";
    import HeadImg from "@/components/HeadImg.vue";
    import AndroidNavBar from "@/components/aui/AndroidNavBar.vue";

    @Component({
        components: {
            HeadImg,
            AndroidNavBar
        }
    })
    export default class EachOtherLike extends Scene {
        private publicPath: string = process.env.BASE_URL;
        @State("UserStore")
        public user!: InterfaceUser;
        private initShow: boolean = false;
        private page: number = 1;
        private watchersTotal: number = 0;
        private watchers: any[] = [];
        private watchersArray: any[] = [];
        private files: [] = [];
        private uploadTimes: number = 0;
        private isToEncounter = 0;

        private get screenWidth(): number {
            const screenWidth = window.screen.width;
            return screenWidth;
        }

        private get options(): any {
            return {
                pullDownRefresh: {txt: "更新成功"},
                pullUpLoad: {
                    threshold: 0,
                    txt: {more: "", noMore: "没有更多数据..."},
                    visible: true
                },
                scrollbar: true
            };
        }

        private get self(): any {
            return {
                sex: this.user.gender,
                headImg: this.user.avatar && this.user.avatarId ? this.user.avatar.filePath : "",
            };
        }

        private get uploadOption(): any {
            let uploadOption: any = {};
            uploadOption.target = this.api.imageUpload;
            uploadOption.fileName = "iFile";
            uploadOption.data = {type: "header"};
            uploadOption.headers = {token: this.user.token};
            uploadOption.checkSuccess = (res: any, file: any) => {
                return res.code == 1;
            };
            return uploadOption;
        }

        private addFiles(): void {
            const file = (<any> this).files[0];
            file && (<any> this).$refs.upload.removeFile(file);
        }

        private get saveParams(): any {
            if (this.files.length > 0) {
                let user = new UserEntity(Object.assign(this.user, {avatarId: (<any> this).files[0].response.data.id})).getBaseInfo;
                delete user.gender;
                delete user.birthday;
                return user;
            }
            return {};
        }

        private addFilesSucc(): void {
            if (!this.user.avatarId) {
                this.addHeadFilesSucc();
            } else {
                if (this.uploadTimes < this.files.length - 1) {
                    this.uploadTimes++;
                } else if (this.uploadTimes == this.files.length - 1) {
                    this.addPhotoFilesSucc();
                }
            }
        }

        private addHeadFilesSucc(): void {
            Http.post(this.api.saveBaseInfo, {...this.saveParams}, {token: this.user.token}).then((res) => {
                console.log(res);
                if (res.code == 1) {
                    this.files = [];
                    this.isToEncounter = 1;
                    (<any> this).$createToast({
                        txt: `上传成功`,
                        type: "correct",
                        time: 1000
                    }).show();
                    Http.get(this.api.getUserInfo, {}, {token: this.user.token}).then((res) => {
                        let user: any = {...res.data, ...res.data.user_info};
                        delete user.user_info;
                        updateUser(CommonUnit.objectUnderlineToHump(user));
                    });
                } else if (res.code == 0) {
                    (<any> this).$createToast({
                        txt: `上传失败,稍后再试!`,
                        type: "warn",
                        time: 1000
                    }).show();
                }
            });
        }

        private addPhotoFilesSucc(): void {
            let photoId: number[] = [];
            console.log(this.files);
            for (let i in this.files) {
                let id: number = Number((<any> this).files[i].response.data.id);
                photoId.push(id);
            }
            let id: string = String(photoId);
            Http.post(this.api.addPhoto, {ids: id}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    this.files = [];
                    this.uploadTimes = 0;
                    this.isToEncounter = 1;
                    (<any> this).$createToast({
                        txt: `上传成功`,
                        type: "correct",
                        time: 1000
                    }).show();
                    Http.get(this.api.getUserInfo, {}, {token: this.user.token}).then((res) => {
                        let user: any = {...res.data, ...res.data.user_info};
                        delete user.user_info;
                        updateUser(CommonUnit.objectUnderlineToHump(user));
                    });
                } else if (res.code == 0) {
                    this.files = [];
                    (<any> this).$createToast({
                        txt: `上传失败,稍后再试!`,
                        type: "warn",
                        time: 1000
                    }).show();
                }
            });
        }

        private onPullingDown(): void {
            (this as any).$refs.scroll.forceUpdate();
        }

        private onPullingUp(): void {
            Http.get(this.api.mutual, {page: this.page, size: 10}, {token: this.user.token}).then((res) => {
                console.log(res);
                if (res.code == 1) {
                    if (res.data.data !== []) {
                        for (let i in res.data.data) {
                            let obj: any = {};
                            if (this.watchers[this.watchers.length - 1].time == i) {
                                this.watchers[this.watchers.length - 1].child = this.watchers[this.watchers.length - 1].child.concat(res.data.data[i]);
                            } else {
                                obj.time = i;
                                obj.child = res.data.data[i];
                                this.watchers.push(obj);
                            }
                        }
                        this.$nextTick(() => {
                            (this as any).$refs.scroll.refresh();
                            (this as any).$refs.scroll.forceUpdate();
                        });
                        this.page++;
                    } else if (res.data.data == []) {
                        (this as any).$refs.scroll.forceUpdate();
                    }
                }
            });
        }

        private needMatch(id: number): void {
            (this as any).$createDialog({
                type: "confirm",
                icon: "cubeic-alert",
                title: "确认申请牵线",
                content: "",
                confirmBtn: {
                    text: "确定",
                    active: true,
                    disabled: false,
                    href: "javascript:;"
                },
                cancelBtn: {
                    text: "取消",
                    active: false,
                    disabled: false,
                    href: "javascript:;"
                },
                onConfirm: () => {
                    let toast = (<any> this).$createToast({
                        time: 0,
                        txt: "申请中...",
                        mask: true
                    }).show();
                    try {
                        Http.post(this.api.applyMatchService, {user_id: id}, {token: this.user.token}).then((res) => {
                            if (res.code === 1) {
                                this.authentication();
                                toast = (<any> this).$createToast({
                                    time: 2500,
                                    txt: "申请成功",
                                    type: "correct",
                                    mask: true,
                                }).show();
                            } else {
                                toast.hide();
                                if (res.data.status == 1) {
                                    toast = (<any> this).$createToast({
                                        time: 2500,
                                        txt: `${res.msg},去绑定红娘吧!`,
                                        type: "error",
                                        mask: true,
                                        onTimeout: () => {
                                            this.toPage("mineMatchmaker");
                                        }
                                    }).show();
                                } else if (res.data.status == 2) {
                                    toast = (<any> this).$createToast({
                                        time: 2500,
                                        txt: `${res.msg},去开通会员吧!`,
                                        type: "error",
                                        mask: true,
                                        onTimeout: () => {
                                            this.toPage("mineMemberRank");
                                        }
                                    }).show();
                                } else {
                                    this.globalSingleResultToast(res);
                                }

                            }
                        });
                    } catch (e) {
                        toast.hide();
                    }
                },
                onCancel: () => {

                }
            }).show();
        }

        private getWatchersHttp(loadToast: any): void {
            Http.get(this.api.mutual, {page: this.page, size: 10}, {token: this.user.token}).then((res) => {
                if (res.code == 1) {
                    loadToast.hide();
                    console.log(res);
                    this.watchersTotal = res.data.total;
                    if (this.page == 1) {
                        this.initShow = true;
                        for (let i in res.data.data) {
                            this.watchersArray = this.watchersArray.concat(res.data.data[i]);
                        }
                    }
                    if (res.data.data !== []) {
                        for (let i in res.data.data) {
                            let obj: any = {};
                            obj.time = i;
                            obj.child = res.data.data[i];
                            this.watchers.push(obj);
                        }
                    }
                    this.page++;
                } else {
                    loadToast = (<any> this).$createToast({
                        time: 2500,
                        type: "error",
                        mask: true,
                        txt: `${res.msg}`,
                        onTimeout: () => {
                            this.navigateBack();
                        }
                    }).show();
                }
            }).catch((res) => {
                loadToast.hide();
                console.log(res);
                (<any> this).$createToast({
                    time: 2500,
                    type: "error",
                    txt: "网络繁忙,暂无信息!",
                    mask: true,
                    onTimeout: () => {
                        this.navigateBack();
                    }
                }).show();
            });
        }

        private getWatchers(): void {
            let loadToast = (<any> this).$createToast({
                time: 0,
                type: "loading",
                mask: true,
                txt: "加载中..."
            }).show();
            this.getWatchersHttp(loadToast);
        }

        private back(): void {
            this.navigateBack();
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private mounted(): void {
            this.getWatchers();
            if (this.user.avatarId && this.user.photo.length > 0) {
                this.isToEncounter = 1;
            }
        }

    }
</script>

<style scoped lang="stylus">
    .view
        position relative;
        width 100vw;
        height 100vh;
        overflow hidden
        background $theme-page-common-background-color;

        .none-watcher
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));

            >>> .cube-upload-def.clear-fix
                display none !important;

            .has-img
                .icon-empty
                    font-size 120px;
                    color $theme-viceColor-font;

                p
                    color $theme-viceColor-font;
                    padding 10px 30px;
                    line-height 1.5em;

            .none-img, .has-img
                padding-top 20vh;
                text-align center;

                .self-img
                    margin 0 auto;
                    text-align center;
                    width 22vw;
                    height 22vw;
                    background-color #ccc;
                    border-radius 50%;
                    color #fff;

                    .icon-ren
                        font-size 50px;
                        line-height 22vw;

            .title
                text-align center;
                padding 10px 0px;

            .tip-none
                color $theme-viceColor-font;
                text-align center;
                padding 10px 30px;
                line-height 1.5em;

            .upload-photo, .to-encounter
                color #fff;
                height 45px;
                line-height 45px;
                text-align center;
                border-radius 200px;
                margin 10px 30px;
                background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));

        .has-watcher
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));

            .nav-box
                position relative;
                width 100vw;
                height 200px;
                //background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));
                background linear-gradient(to bottom, rgba(255, 255, 255, .6), rgba(254, 124, 79, .6));

                svg
                    position absolute;
                    bottom 0px;
                    left 0px;

                .arc-box
                    position absolute;
                    left 0px;
                    width 100vw;
                    z-index 50;

                    .head-img-container
                        width 25vw;
                        height 25vw;
                        position absolute;
                        bottom 40px;
                        left calc(50vw - 11vw);
                        border-radius 50%;
                        text-align center;

                        > svg.huangguan
                            font-size 26px;
                            position absolute;
                            top 0px;
                            left 50%;
                            z-index 1000;
                            transform translate(-50%, -70%);

                        .head-img-box
                            position absolute;
                            border-radius 50%;
                            overflow hidden;

                            .state-tip
                                width 100%;
                                height 20px;
                                line-height 20px;
                                color #fff;
                                font-size 10px;
                                background-color rgba(0, 0, 0, .5);
                                position absolute;
                                bottom 0;
                                left 0;


            .un-senior-member
                text-align center;
                height calc(100vh - 200px);
                background-color #fff;

                .watchers-tip
                    color $theme-common-color;

                    b
                        font-size 30px;

                .member-open-tip
                    padding 10px;

                .member-open
                    color #fff;
                    height 45px;
                    line-height 45px;
                    text-align center;
                    border-radius 200px;
                    margin 10px 30px;
                    background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));

                .watchers-box
                    padding 20px 0px;
                    justify-content: space-around;

                    .watcher

                        .avatar
                            width 25vw;

                            .creat-time
                                padding 10px 0px;

                            .none-avatar
                                width 25vw;
                                height 25vw;
                                line-height 25vw;
                                border-radius 50%;
                                background-color #F3F3F3;

                                .iconfont
                                    font-size 60px;
                                    color #C0C0C0;

                            .has-avatar
                                width 25vw;
                                height 25vw;
                                position relative;

                                img
                                    width 25vw;
                                    height 25vw;
                                    border-radius 50%;
                                    display block;

                                .icon-suo
                                    position absolute;
                                    top 50%;
                                    left 50%;
                                    transform translate(-50%, -50%);
                                    font-size 40px;
                                    color rgba(255, 255, 255, .7);

        .scroll.is-senior-member
            margin-top calc(47px + var(--safe-area-inset-top));
            height calc(100vh - 47px - var(--safe-area-inset-top));
            background-color #fff;
            position relative;
            padding 0 0 calc(15px + var(--safe-area-inset-bottom)) 0px;

            .date-sort
                .time
                    padding 0px 10px;
                    height 30px;
                    line-height 30px;

                    .circle
                        display: inline-block;
                        width 10px;
                        height 10px;
                        border 1px solid $theme-viceColor-font;
                        border-radius 50%;

                .content
                    margin-left 15px;
                    border-left 1px solid $theme-line-color;
                    flex-wrap wrap;
                    justify-content left;

                    .item
                        width calc((100vw - 15px - 1px) / 3);
                        padding 10px 10px;
                        text-align center;

                        .has-avatar
                            width 100%;
                            height calc((100vw - 15px - 1px) / 3 - 40px);

                            img
                                display inline-block;
                                width calc((100vw - 15px - 1px) / 3 - 40px);
                                height calc((100vw - 15px - 1px) / 3 - 40px);
                                border-radius 50%;

                        .none-avatar
                            margin 0 auto;
                            width calc((100vw - 15px - 1px) / 3 - 40px);
                            height calc((100vw - 15px - 1px) / 3 - 40px);
                            line-height calc((100vw - 15px - 1px) / 3 - 40px);
                            border-radius 50%;
                            background-color #F3F3F3;

                            .iconfont
                                font-size 60px;
                                color #C0C0C0;

                        .nickname
                            padding 7px 0px;

                        .age
                            color $theme-viceColor-font;
                            font-size 12px;

                        .handle
                            height 40px;
                            line-height 40px;

                            span
                                color $theme-common-color;
                                border 1px solid $theme-common-color;
                                border-radius 5px;
                                padding 3px 10px;


</style>
